<template>
  <div class="content-container">
    <el-card>
      <!-- 查询部分 -->
      <el-form :model="query" :inline="true" class="demo-form-inline">
        <el-form-item label="表单名称">
          <el-input v-model="query.name" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="formQuery(false)">查询</el-button>
          <el-button type="warning" @click="formQuery(true)">重置</el-button>
          <el-button type="primary" @click="openDialog(null)">新增</el-button>

          <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" title="确认删除选中数据?" @confirm="removeRows"
            width="200px">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form>
      <!-- 数据部分 -->
      <el-table max-height="600px" :data="tableData" stripe style="width: 100%; margin-top: 10px" ref="tableDataRef">
        <el-table-column type="selection" />
        <el-table-column prop="name" label="表单名称" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button @click="openDialog(scope.row)" link type="primary">
              编辑
            </el-button>
            <el-button @click="viewDialog(scope.row)" link type="primary">
              查看
            </el-button>
            <el-button @click="designDialog(scope.row)" link type="primary">
              设计
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 20px">
        <el-pagination v-model:current-page="query.current" v-model:page-size="query.size"
          :page-sizes="[100, 200, 300, 400]" small background layout="total, sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

      <el-dialog v-model="dialogVisible" :title="(formData.id ? '编辑' : '新增') + '表单信息'" width="60%" :show-close="false"
        :close-on-click-modal="false">
        <el-form :rules="rules" :model="formData" class="demo-form-inline" ref="formDataRef">
          <el-form-item prop="name" label="表单名称">
            <el-input v-model="formData.name" clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="formSubmit">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog v-model="viewVisible" width="60%" :show-close="false" :close-on-click-modal="false">
        <el-form>
          <el-form-item>
            <el-input v-model="viewData.name" disabled>
              <template #prepend>表单名称</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="viewData.createTime" disabled>
              <template #prepend>创建时间</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="viewData.updateTime" disabled>
              <template #prepend>修改时间</template>
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="viewVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog v-model="designVisible" width="100%" :show-close="false" :close-on-click-modal="false">

        <v-form-designer></v-form-designer>
      
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="designVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="Form">
import { onMounted, ref, reactive, toRefs } from 'vue'
import type {
  Form,
  FormModDTO,
  FormQueryDTO,
  FormVo,
} from '@/api/process/form/type'
import {
  formAdd,
  formDel,
  formMod,
  formSelect,
} from '@/api/process/form'
import { ElNotification } from 'element-plus'

const formDataRef = ref()
const tableDataRef = ref()
const initQuery = () => {
  return { current: 1, size: 10 } as FormQueryDTO
}
const state = reactive<any>({
  query: initQuery(),
  tableData: [] as Form[],
  total: 0,
  dialogVisible: false,
  viewVisible: false,
  viewData: {} as FormVo,
  formData: {} as FormModDTO,
  rules: {
    name: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }]
  },
  designVisible: false
})
const {
  query,
  tableData,
  total,
  dialogVisible,
  formData,
  rules,
  viewVisible,
  viewData,
  designVisible
} = toRefs(state)
const openDialog = (data: any) => {
  if (formDataRef.value) {
    formDataRef.value.resetFields()
  }

  formData.value = data == null ? {} : data
  dialogVisible.value = true
}
const viewDialog = (data: any) => {
  viewVisible.value = true
  viewData.value = data
}
const designDialog = (data: any) => {
  designVisible.value = true
}
const handleSizeChange = (size: number) => {
  query.value.size = size
  buildTable()
}
const handleCurrentChange = (current: number) => {
  query.value.current = current
  buildTable()
}
onMounted(() => {
  buildTable()
})
const buildTable = async () => {
  const result = await formSelect(query.value)
  tableData.value = result.data.rows
  total.value = result.data.total
}



const formQuery = (reset: boolean) => {
  reset ? (query.value = initQuery()) : query.value
  buildTable()
}
const formSubmit = async () => {
  await formDataRef.value?.validate()
  if (formData.value.id) {
    await formMod(formData.value)
  } else {
    await formAdd(formData.value)
  }
  dialogVisible.value = false
  await buildTable()
}
const removeRows = async () => {
  const rows = tableDataRef.value.getSelectionRows()
  if (rows.length == 0) {
    ElNotification({
      title: '删除失败',
      message: '请选择要删除的数据',
      type: 'warning',
    })
    return
  }
  const ids = rows.map((each: any) => each.id)
  await formDel({ ids: ids })
  await buildTable()
}
</script>
<style scoped lang="scss">
.content-container {
  padding: 12px;
}
</style>